<template>
    <div style="height:100%">
        <el-row>
            <el-col :span="24">
                <div class="grid-contentont-purple-dark">
                    <navs></navs>
                </div>
            </el-col>
        </el-row>
        <el-row style="height:100%">
            <el-col :span="4" style="height:100%">
                <Sidebars></Sidebars>
            </el-col>
            <el-col :span="20">
                <div class="grid-content bg-purple-light" style="height:100%">
                    <transition name="slide-fade" >
                        <router-view></router-view>
                    </transition>

                </div>
            </el-col>
        </el-row>
    </div>

</template>


<style>
    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>
<script>
    import Navs from './admin/block/Nav';
    import Sidebars from './admin/block/Sidebar';

    export default {
        components: {
            Navs,
            Sidebars
        }
    }
</script>
